import React, {Component} from 'react'
import {Table, Button, Checkbox, Icon, Select, Modal} from 'antd'
import { FeedbackDetail, FeedbackChoice } from './'

const Option = Select.Option


// 意向学员组件
class FeedbackContent extends Component {
  constructor() {
    super()
    this.state = {
      startValue: null,
      endValue: null,
      endOpen: false,
      stuVisible: false,
      num: 1,
    }
    this.setStuVisible = this.setStuVisible.bind(this)
    this.modalBtnRender = this.modalBtnRender.bind(this)
  }

  setStuVisible(stuVisible) {
    this.setState({ stuVisible })
  }

  modalBtnRender(num) {
    let result
    switch(num)
    {
      case 1 :
        result = <FeedbackDetail />
        break
      default:
        result = <FeedbackDetail />
    }
    return result
  }

  render() {
    const { num } = this.state
    const columns = [{
      title: '课程编号',
      key: 'Mobile',
      dataIndex: 'Mobile',
      render: text => {
        return (
            <Checkbox>
              {text}
            </Checkbox>
          )
      }
    }, {
      title: '课程名',
      dataIndex: 'name',
    }, {
      title: '班级数（已开 代开）',
      dataIndex: 'Need',
    }, {
      title: '负责人',
      dataIndex: 'customerLevel',
      render: text => {
        return <span className="rt-color-yellow">{text}</span>
      }
    }, {
      title: '最近开班',
      dataIndex: 'date',
    }, {
      title: '操作',
      dataIndex: 'uilty',
      render: (text, record, index) => {
        return (
          <div className="rt-operation">
            <Button
              icon="edit"
              onClick={
                () => {
                  this.setStuVisible(true)
                }
              }
            >
              编辑
            </Button>
            <Icon type="delete" className="rt-color-red"/>
          </div>
        )
      }
    }]
    const data = [];
    for (let i = 0; i < 20; i++) {
      data.push({
        key: i,
        name: `Edward King Edward King Edward King${i}`,
        Mobile: '135****8888',
        Need: 'London, Park Lane no',
        customerLevel: i,
        date: '2015-11-03',
        people: '毛少将',
        commi: '15天后',
      })
    }
    return (
        <div className="rt-intention">
          <header className="rt-customer-header cl">
            <h3 className="lf rt-prop-title">反馈</h3>
            <ul className="rt-stu-title">
              <li>
                <strong className="rt-color-pureBlue">按反馈日期排序</strong>
                <span>|</span>
              </li>
              <li>
                <strong>按负责人排序</strong>
              </li>
            </ul>
          </header>
          <FeedbackChoice />
          <Table className="rt-itent-table" columns={columns} dataSource={data} />
          <Modal
            title="退款详情"
            onCancel={() => this.setStuVisible(false)}
            wrapClassName="vertical-center-modal"
            visible={this.state.stuVisible}
            footer={null}
          >
            <div className="cl ">
              <Button
                className={`${ num == 1 ? 'rt-btn-bottom-active' : null} rt-btn-show  lf`}
                onClick={
                  () => {
                    this.setState({
                      num: 1,
                    })
                  }
                }
              >
                退款详情
              </Button>
              <Button
                className="rt-btn-return rf"
                onClick={
                  () => {
                    this.setStuVisible(false)
                  }
                }
              >
                返回列表
              </Button>
            </div>
            {this.modalBtnRender(num)}
            {num == 1 ? (
              <div className="cl rt-modal-foot">
                <Button
                  className="lf rt-btn-update"
                  onClick={
                    () => {
                      this.setStuVisible(false)
                    }
                  }
                >
                  修改
                </Button>
                <Button
                  className="rf rt-btn-del"
                  onClick={
                    () => {
                      this.setStuVisible(false)
                    }
                  }
                >
                  删除
                </Button>
              </div>
            ) : null}
          </Modal>
        </div>
      )
  }
}

export default FeedbackContent